<template>
	<div class="detail-main">
		<div class="detail">
			<van-nav-bar title="耀莱成龙影城（建业店）"
			             @click-left="onClickLeft"
			             @click-right="onClickRight"
			             :border='false'>
				<template #left>
					<van-icon name="arrow-left"
					          size="18" />
				</template>
				<template #right>
					<van-icon name="star-o"
					          size="18" />
				</template>
			</van-nav-bar>

			<div class="movie-msg">
				<h2 class="movie-name">
					后来的我们
				</h2>
				<div class="movie-time">
					15-30--17:14
				</div>
				<div class="movie-type">
					原版3D
				</div>
			</div>
			<div class="seat-type">
				<div class="pending">
					<div></div>
					<p>可选</p>
				</div>
				<div class="selled">
					<div></div>
					<p>已出售</p>
				</div>
				<div class="selected">
					<div></div>
					<p>已选</p>
				</div>
			</div>

		</div>
		<!-- 座位 -->
		<div class="seat">
			<div class="seat-room-name">
				3号激光厅银幕
			</div>
			<div class="seat-main">
				<div id="seat-side"
				     class="seat-side">
					<div v-for="it in 9"
					     :key="it">
						{{it}}
					</div>
				</div>
				<div class="seat-list">
					<ul class="row"
					    v-for="row in cinemaSeat.row"
					    :class="row % 3==0? 'sp': '' "
					    :key="row">
						<li v-for="col in cinemaSeat.col"
						    v-if="isShow"
						    :key="col"
						    class="cell"
						    :class="(col + 3)% 4 ==0? 'sp': '' ">
							<div v-if="seatArray[row-1][col-1] != -1"
							     @click="change(row-1,col-1)"
							     :class="seatArray[row-1][col-1] == 2 ? 'sell' :seatArray[row-1][col-1] == 0? 'gray':'choose' ">
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 推荐座位 -->
		<!-- <button @click="sub"> 提交</button> -->
		<div class="recommend">
			<div class="recommend-title">推荐座位</div>
			<div class="recommend-type">
				<div @click="recommend(1)">1人</div>
				<div @click="recommend(2)">2人</div>
				<div @click="recommend(3)">3人</div>
				<div @click="recommend(4)">4人</div>
			</div>
		</div>
		<div class="submit">
			<div tag="div"
			     class="settle"
			     v-if="!canSubmit"
			     @click="sub"> 确认选座 </div>
			<div class="settle"
			     v-else> 请先选座 </div>
		</div>
	</div>
</template>

<script>
import ban1 from '@/assets/images/cinema/banner01.png'
import ban2 from '@/assets/images/cinema/banner02.png'
import ban3 from '@/assets/images/cinema/banner03.png'
import ban4 from '@/assets/images/cinema/banner04.png'
import ban5 from '@/assets/images/cinema/banner05.png'

import { mapMutations } from 'vuex'
import { log } from 'util'
import { nextTick } from 'q'
export default {
	name: 'detail',
	data() {
		return {
			swiperOption: {
				slidesPerView: 3,
				// spaceBetween: 5,
				centeredSlides: true,
				loop: true
			},
			pickedList: [1],
			cinemaSeat: {
				row: 9,
				col: 12,
				selled: [[4, 5], [4, 6]],
				disabled: [[0, 0], [0, 1], [0, 10], [0, 11], [1, 0], [1, 11]]
			},
			seatArray: []
		}
	},
	created() {
		this.$store.commit('ticket/clear')
		// console.log(this.$store)
	},
	mounted() {
		// 初始化座位数组
		this.initSeatArray()
	},
	computed: {
		isShow() {
			return this.seatArray.length > 0
		},
		canSubmit() {
			return this.seatArray.every(ele => {
				return ele.every(el => {
					return el != 1
				})
			})
		}
	},
	methods: {
		sub() {
			this.$store.commit('ticket/buy', this.seatArray)
			this.$router.push('order')

			// console.log(this.$store.state)
		},
		change(x, y) {
			// console.log(this.seatArray[x][y])

			let value = this.seatArray[x][y]
			let newArray = this.seatArray
			if (value === 2) return
			else if (value === 1) {
				newArray[x][y] = 0
			} else if (value === 0) {
				newArray[x][y] = 1
			}
			this.seatArray = newArray.splice(0)
			// console.log(this.seatArray[x][y])
			// console.log(this.canSubmit)
		},
		initSeatArray() {
			this.seatArray = Array(this.cinemaSeat.row)
				.fill(0)
				.map(() => {
					return Array(this.cinemaSeat.col).fill(0)
				})
			// 去除 非座位

			this.cinemaSeat.disabled.map(ele => {
				console.log(ele[0])
				this.seatArray[ele[0]].splice(ele[1], 1, -1)
			})
			//去除 已选择
			this.cinemaSeat.selled.map(ele => {
				this.seatArray[ele[0]].splice(ele[1], 1, 2)
			})
			console.log(this.seatArray)
		},
		onClickLeft() {
			this.$router.back()
		},
		onClickRight() {
			// this.$router.back()
		},
		// submit(x) {
		// 	this.$store.commit('ticket/buy',x)
		// },
		recommend(num) {
			//  中间值
			const row = this.cinemaSeat.row - 1 //8
			const rol = this.cinemaSeat.col - 1
			const midRow = Math.ceil(this.cinemaSeat.row / 2)

			// 找到中间排, 向后执行选座函数
			let arr1 = this.pickRowSeat(midRow, row, num)

			if (arr1.distance != 12) {
				for (let i = 0; i < num; i++) {
					this.change(arr1.row, arr1.col + i)
				}
				return
			}
			// 向前执行
			const arr2 = this.pickRowSeat(midRow - 1, 0, num)
			// console.log(midRow);//5
			
			if (arr2.distance != 12) {
				console.log(arr2)
				// 改变seatArray
					for (let i = 0; i < num; i++) {
					this.change(arr2.row, arr2.col + i)
				}
				return
			}
			alert('没有合适的座位')
		},
		pickRowSeat(midRow, dirRow, num) {
			//
			let rowNum = midRow //开始位置

			const col = Math.ceil((this.cinemaSeat.col - 1) / 2) //中间值

		 
			// 从前向后遍历 数组 有0 的就可以选
			let result = {
				distance: 12
			}
			//this.cinemaSeat.row = 9
			while (midRow >= 0 && midRow < this.cinemaSeat.row) {
						let arr = []
				for (let i = 0; i < this.cinemaSeat.col; i++) {
					
					if (this.seatArray[rowNum][i] == 0) {
						// alert(this.seatArray[0] ,'seat')
						// console.log(i , "循环i")
						const b = Math.abs(i + num / 2 - col)
						let currArr = {
							distance: b,
							row: rowNum,
							col: i
						}
						// console.log(arr, 'arr' ,arr.length,num)
						arr.push(currArr)
						// console.log(arr, 'arr' ,arr.length)
					}
					// alert(1)
					if (this.seatArray[rowNum][i] != 0) {
						arr = []
						// console.log(i ,arr ,'数组')
					}
					if (arr.length == num) {
						// console.log(arr.length ,arr ,'长度',num);
						// 判断当前的数值是否更接近中间
						let flag = arr.splice(0, 1)[0]
						// console.log(flag.distance,flag ,'dis',result.distance)
						result = flag.distance < result.distance ? flag : result
						// console.log(result ,'result');
					}
				}
				// dirRow = 8 第二次的时候
				if (rowNum <= dirRow) {
					rowNum++
					if (rowNum > dirRow) {
						return result
					}
					// console.log(rowNum,row, 'row');
				} else if (rowNum >= dirRow) {
					rowNum--
						// console.log(rowNum)
					if (rowNum < dirRow) {
						return result
					}
				}
			}
			return result
		},
		...mapMutations({
			submit: 'ticket/buy'
		})
	}
}
</script>

<style lang='scss' scoped>
.detail-main {
	height: 100vh;
	overflow: scroll;
}
div.detail {
	// height: 400px;
	padding-bottom: 80px;
	// border-bottom-right-radius: 300px 60px;
	// border-bottom-left-radius: 300px 60px;
	background-image: linear-gradient(135deg, #6f3f4c 0%, #6e4f44 100%);
	box-shadow: 0 4px 8px 0 rgba(76, 41, 49, 0.54);
	.van-nav-bar {
		height: 90px;
		margin: 0 auto;
		// position:
		background-color: inherit;
		/deep/ .van-nav-bar__right {
			margin-right: 20px;
		}
		/deep/ .van-nav-bar__left {
			margin-left: 20px;
		}
		/deep/ .van-nav-bar__title {
			font-size: 32px;
			color: #ffffff;
		}
	}
	.van-cell--clickable {
		// height: 88px;
		padding-left: 44px;
		margin-top: 39px;
		background-color: initial;
		.van-cell__left-icon::before {
			font-size: 42px;
		}
		div {
			margin-left: 51.4px;
			span {
				font-size: 32px;
				color: #ffffff;
			}
			div {
				font-size: 24px;
				opacity: 0.51;
				color: #ffffff;
			}
		}
		.van-cell__right-icon::before {
			font-size: 35px;
		}
	}
	.movie-msg {
		width: 670px;
		margin: 0 auto;
		.movie-name {
			font-size: 32px;
			color: #ffffff;
		}
		.movie-time {
			display: inline-block;
			opacity: 0.73;
			text-align: center;
			background: #33363d;
			border-radius: 10px;
			border-radius: 10px;
			height: 46px;
			line-height: 46px;
			width: 198px;
			font-size: 28px;
			color: #ffffff;
			margin-right: 34px;
			margin-top: 21px;
		}
		.movie-type {
			display: inline-block;
			height: 46px;
			width: 126px;
			opacity: 0.73;
			border: 2px solid #33363d;
			border-radius: 10px;
			border-radius: 10px;
			font-size: 28px;
			text-align: center;
			line-height: 46px;
			color: #ffffff;
		}
	}
	.seat-type {
		display: flex;
		width: 670px;
		margin: 44px auto;
		justify-content: space-between;
		div {
			width: 146px;
			display: flex;
			div {
				height: 52px;
				width: 52px;
				box-shadow: 0 1px 3px 0;
				border-radius: 20%;
				background-color: #909294;
				margin-right: 10px;
			}
			p {
				opacity: 0.78;
				font-size: 28px;
				text-align: center;
				line-height: 52px;
				color: #ffffff;
			}
		}
		.selled {
			div {
				background-color: #f9c34a;
			}
		}
		.selected {
			div {
				background-color: #6548a9;
			}
		}
	}
}
.seat {
	margin-top: -70px;
	position: relative;
	z-index: 9;
	// height: 850px;
	background-color: #22262d;
	padding-bottom: 110px;
	border-top-left-radius: 300px 60px;
	border-top-right-radius: 300px 60px;
	.seat-room-name {
		height: 56px;
		width: 300px;
		margin: -10px auto;
		text-align: center;
		line-height: 66px;
		background-color: #33363d;
		opacity: 0.78;
		font-size: 24px;
		color: #ffffff;
	}
	.seat-main {
		margin-top: 100px;
		display: flex;
		.seat-side {
			width: 40px;
			padding: 60px 0;
			margin: 0 10px 0 20px;
			background-color: #8f9194;
			border-radius: 24px;
			text-align: center;
			div {
				color: #ffffff;
				font-size: 32px;
			}
		}
		.seat-list {
			background-color: transparent;
			margin-left: 10px;
			ul {
				width: 650px;
				height: 40px;
				margin-bottom: 10px;
				display: flex;
				justify-content: space-between;
				li {
					display: block;
					height: 40px;
					width: 40px;
					// margin-left: ;
					background-color: transparent;
					div {
						height: 40px;
						width: 40px;
					}
				}
				li.sp {
					margin-left: 20px;
				}
				//<!-- 0 可选 -->
				div.gray {
					background-color: #8e9093;
				}
				//<!-- 2已出售-->
				div.sell {
					background-color: #a3843f;
				}
				//<!-- 1已选 -->
				div.choose {
					background-color: #4a3b78;
				}
			}
			ul.sp {
				margin-bottom: 20px;
			}
		}
	}
}
.recommend {
	height: 50px;
	width: 670px;
	// margin-left: 40px;
	// position: absolute;
	// bottom: 80px;
	// left: 50px;
	margin: 20px auto 40px;
	display: flex;
	.recommend-title {
		font-size: 32px;
		color: #ffffff;
		margin-right: 24px;
	}
	.recommend-type {
		width: 488px;
		display: flex;
		justify-content: space-between;
		div {
			width: 104px;
			height: 46px;
			text-align: center;
			line-height: 46px;
			opacity: 0.53;
			border: 2px solid #979797;
			font-size: 28px;
			color: #ffffff;
		}
	}
}
.submit {
	width: 670px;
	margin: 30px auto 40px;

	.settle {
		width: 670px;
		height: 80px;
		background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
		box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
		border-radius: 12px;
		border-radius: 12px;
		// opacity: 0.44;
		font-size: 36px;
		color: #ffffff;
		text-align: center;
		line-height: 80px;
		font-weight: bold;
	}
}
</style>
